<template>
    <div class="search-input-container">
        <label :class="{'active':isActive}">搜索</label>
        <div style="width: 50px"></div>
        <div class="input-box">
            <input @focus="activeInput" @blur="blurInput(this)">
            <div style="width: 10px"></div>
            <button>
                <img src="../../../assets/main/topper/search.png">
            </button>
        </div>
    </div>
</template>

<script>
import {ref} from "vue";

export default {
    name: "searchInput",
    setup() {
        let isActive = ref(false)

        function activeInput() {
            isActive.value = true
        }

        function blurInput(that) {
            if (that.$el.children[2].children[0].value !== '') {
                isActive.value = true
            } else {
                isActive.value = false
            }
        }

        return {
            isActive,
            activeInput,
            blurInput
        }
    }
}
</script>

<style scoped>
    .search-input-container {
        padding: 10px 20px;
        width: auto;
        height: calc(100% - 20px);
        display: flex;
        position: relative;
    }

    .search-input-container label {
        top: 18px;
        left: 90px;
        position: absolute;
        font-size: 20px;
        transition: all ease-in-out 300ms;
        color: #242424;
        pointer-events: none;
    }

    .search-input-container label.active {
        left: 20px;
        color: white;
    }

    .search-input-container .input-box {
        padding: 8px 14px 8px 20px;
        border: none;
        width: 280px;
        border-radius: 30px;
        outline: none;
        font-size: 15px;
        background-color: white;
        display: flex;
        justify-content: space-between;
    }

    .search-input-container .input-box input {
        border: none;
        outline: none;
        font-size: 15px;
        width: auto;
    }

    button {
        margin: 0 0 0 20px;
        padding: 0;
        width: 24px;
        height: 24px;
        background-color: transparent;
        outline: none;
        border: none;
    }

    button:hover {
        border: none;
    }

    button img {
        width: 24px;
        height: 24px;
    }




</style>